<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" charset="utf-8" src="/assets/plug/ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="/assets/plug/ueditor/ueditor.all.min.js"> </script>
    <script src="/assets/js/jquery-3.3.1.min.js"></script>
    <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
    <script type="text/javascript" charset="utf-8" src="/assets/plug/ueditor/lang/zh-cn/zh-cn.js"></script>
    <title>添加产品</title>
    <style>
        .baseinfo {
            width: 100%;
            height: 26px;
            border-bottom: 1px solid #dbdbdb;
            margin-bottom: 20px;
        }
        .baseinfo span {
            display: inline-block;
            border-bottom: 3px solid #0e8bc5;
            margin-left: 1px;
            width: 75px;
            text-align: center;
            height: 24px;
            line-height: 24px;
            font-size: 16px;
        }
        .product div > span {
            display: inline-block;
            width: 79px;
            height: 26px;
            line-height: 26px;
        }
        .product > div {
            margin-top: 10px;
            height: 30px;
        }
        .product_category select {
            height: 30px;
            width: 78%;
        }
        .product div > input {
            height: 30px;
            width: 55%;
            padding-left: 5px;
        }
        .product div > label {
            font-style: normal;
            font-weight: normal;
            color: #ff0c00;
            margin-left: 20px;
        }
        .product div span > i {
            color: red;
            margin-right: 9px;
        }

        .img_style {
            width: 300px;
            height: 139px;
            margin-top: 10px;
            margin-left: 83px;
        }
        .baseinfo_beizhu {
            width: 100%;
            height: 26px;
            border-bottom: 1px solid #dbdbdb;
            margin-bottom: 10px;
            margin-top: 22px !important;
        }
        .baseinfo_beizhu span {
            display: inline-block;
            border-bottom: 3px solid #0e8bc5;
            margin-left: 1px;
            width: 75px;
            text-align: center;
            height: 24px;
            line-height: 24px;
            font-size: 16px;
            margin-bottom: 5px;
        }
        .product_contentsd span i {
            color: red;
            margin-right: 9px;
        }
        .product_submit {
            text-align: center;
        }
        .product_submit input{
            width: 115px !important;
            height: 35px !important;
            text-align: center;
            border-radius: 6px;
            margin-top: 10px;
            margin-bottom: 10px;
            background-color: rgb(0, 150, 136);
            font-size: 16px;
            color: #fff;
        }
        .product_submit input[type=button] {
            background-color: rgba(2,3,4,0);
            border: 1px solid #2e2e2e;
            color: #000;
        }

        input[type="file"]{
            display: inline-block !important;
            position: absolute;
            width: 90px;
            height: 30px;
            border: 1px solid red;
            opacity: 0;
            z-index: 999;
        }
        .click_upload {
            display: inline-block !important;
            position: absolute;
            width: 90px;
            height: 30px;
            text-align: center;
            line-height:30px;
            border: 1px solid rgb(24, 188, 156);
            border-radius: 6px;
            font-size: 15px;
            font-family:Arial;
            color: #fff;
            background-color: #00b9ca;
        }
        .upload_button {
            vertical-align: middle;
            display: inline-block;
            width: 90px;
            height: 30px;
            margin-right: 10px;

        }
    </style>
</head>
<body>
<div class="baseinfo">
    <span>基本信息</span>
</div>
<div class="product">
    <div class="product_category">
        <span>产品分类</span>
        <select name="newscate_id" id="productcate_id">
            {foreach name="productCate" item="val"}
                <option value="{$val.id}">{$val.catename}</option>
            {/foreach}
        </select>
    </div>
    <div class="product_title">
        <span>  <i>*</i>标题</span>
        <input type="text" name="title" placeholder="请输入标题！">
        <label>(标题字数限制在35个字符)</label>
    </div>
    <div class="product_keywords">
        <span> <i>*</i>关键词</span>
        <input type="text" name="keywords" placeholder="请输入关键词！">
        <label>(标题字数限制在35个字符)</label>
    </div>
    <div class="product_detail">
        <span><i>*</i>祥情</span>
        <input type="text" name="detail" placeholder="请输入祥情！">
        <label>(标题字数限制在35个字符)</label>
    </div>
    <div class="product_display">
        <span class="product_display_span">上传产品图</span>
        <div class="upload_button">
            <input id="file_upload" type="file" multiple="true">
            <span class="click_upload">点击上传</span>
        </div>
    </div>
    <img  id="txtimg" src="" alt="">
    <div class="baseinfo_beizhu">
        <span>备注资料</span>
    </div>
    <div class="product_contentsd">
        <span><i>*</i>产品内容</span>
        <script id="editor" type="text/plain" name="content"></script>
        <div class="product_submit">
            <input type="submit" value="提交">
    </div>
</div>
</body>
<script>
    //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
    //定义工具条
    $(function () {
        UE.getEditor('editor', {
            toolbars: [['fullscreen', 'source', 'undo', 'redo', 'bold', 'italic',
                'underline','fontborder', 'backcolor', 'fontsize', 'fontfamily',
                'justifyleft', 'justifyright','justifycenter', 'justifyjustify',
                'strikethrough','superscript', 'subscript', 'removeformat',
                'formatmatch','autotypeset', 'blockquote', 'pasteplain', '|',
                'forecolor', 'backcolor','insertorderedlist', 'insertunorderedlist',
                'selectall', 'cleardoc', 'link', 'unlink','emotion', 'help'
            ]],
            elementPathEnabled: false,
            wordCount: false
        });
        //取消
        $('input[type=button]').click(function () {
            top.location.href= '/admin/productcate/productindex?ref=addtabs'
        })
        //提交
        $('input[type=submit]').click(function (event) {
            var productcate_id = $('#productcate_id').val();
            var title = $('input[name=title]').val();
            var keywords = $('input[name=keywords]').val();
            var detail = $('input[name=detail]').val();
            var content = UE.getEditor('editor').getContent();
            var display_img = $('#txtimg').attr('src');

            $.ajax({
                url: '/admin/productcate/addproduct',
                type: 'post',
                data: {productcate_id: productcate_id, title: title, keywords: keywords, detail: detail, content: content, display_img: display_img},
                success:function (res) {
                    alert(res.info);
                    if(res.status) {
                        top.location.href = '/admin/productcate/productindex?ref=addtabs'
                    }
                }

            })
        });

        //上传的函数
        function qiniuUpload(fileData, img, cssClass) {
            var options = {
                url: '/admin/productcate/qiniu',
                type: 'post',
                data: fileData,
                contentType: false, // 告诉jQuery不要去设置请求头
                processData: false, // 告诉jQuery不要将data属性指定的对象转换为字符串
                success: function (res) {
                    if (res.status == 1) {
                        $(img).attr('src', res.data).addClass(cssClass);
                    }else {
                        alert(res.info);
                        return
                    }
                }
            }
            $.ajax(options)
        }
        //pc的LOgo
        $('#file_upload').change(function () {
            oInput = $('#file_upload')
            if (oInput.length <= 0) {
                return window.alert('请选择文件')
            }
            var file;
            file = oInput[0].files[0]
            var fd = new FormData()
            fd.append('myfile', file)
            //调用上传函数
            qiniuUpload(fd, '#txtimg', 'img_style');
        });

    })

</script>
</html>